<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博雅互动</title>
    <link  rel="stylesheet" href="style/reset.css"/>
    <style>
     body{
       font-size: 14px;
       font-family: "Microsoft YaHei","SimSun";

    }
    .inner_c{
        width: 1000px;
        margin: 0 auto;
        overflow: hidden;
    }
    #header{
        background-color: #191d3a;
        height: 58px;
    }
    #logo{
        float:left;
        margin-right: 40px;
    }
    #nav{
        float: left;
    }
    #join{
        float: left;
    }
    #nav ul li{
        float: left;
        width: 100px;
    }
    #nav ul li a{
        display: block;
        line-height: 58px;
        text-align: center;
        text-decoration: none;
        color: #aaaaaa;
    }
    #nav ul li a.current{
        color: white;
        background: #252947;
    }
   #nav ul li a:hover{
    color:white;
    background: #252947;;
   }
   #join a{
      display: block;
      width: 100px;
      height: 32px;
      margin: 13px 30px;
      text-align: center;
      line-height: 32px;
      color: white;
      text-decoration: none;
      background-color: #38b774;
      border-radius: 4px;
   }
   #banner{
    background: url("images/banner.jpg") center no-repeat;
    height: 485px;
   }
   #content ul{
    display: flex;
    justify-content: space-between;
    padding: 50px 0;
    border-bottom: 1px solid #dbe1e7;
    text-align: center;
   }
   #content ul li img{
    width: 218px;
   }
   #content ul li a{
    
    text-decoration: none;
    font-size: 12px;
    color: #38b774;
    padding-right: 12px;
    background: url("images/sanjiaoxing.png") no-repeat right;
   }
   #content ul li p{
    padding: 10px 0;
   }
    </style>
</head>
<body>
    <div id="header">
        <div class="inner_c">
            <div id="logo"><img src="images/logo.png" alt="博雅互动"></div>
            <div id="nav">
                <ul>
                    <li><a class="current" href="">首页</a> </li>
                    <li><a href="">博雅游戏</a></li>
                    <li><a href="">博雅新闻</a></li>
                    <li><a href="">关于我们</a></li>
                    <li><a href="">客服中心</a></li>
                    <li><a href="">投资者关系</a></li>
                </ul>
            </div>
            <div id="join"><a href="">加入我们</a></div>
        </div>
        </div>
    <div id="banner"></div>
    <div id="content">
        <div class="inner_c">
            <ul>
                <li>
                    <p><img src="images/pro1.jpg" alt=""></p>
                    <h3>BPT宣传片</h3>
                    <p><a href="">点击播放</a></p>
                </li>
                <li>
                    <p><img src="images/pro2.jpg" alt=""></p>
                    <h3>BPT宣传片</h3>
                    <p><a href="">点击播放</a></p>
                </li>
                <li>
                    <p><img src="images/pro3.jpg" alt=""></p>
                    <h3>BPT宣传片</h3>
                    <p><a href="">点击播放</a></p>
                </li>
                <li>
                    <p><img src="images/pro4.jpg" alt=""></p>
                    <h3>BPT宣传片</h3>
                    <p><a href="">点击播放</a></p>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>